<template>
  <div class="chart-xy-option">
    <el-collapse-item title="X轴" v-if="hasx">
      <el-form-item label="显示">
        <el-switch v-model="attribute.xAxis.show" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="attribute.xAxis.name" clearable/>
      </el-form-item>
      <el-form-item label="名称位置">
        <tm-radio v-model="attribute.xAxis.nameLocation" :data="locationList"/>
      </el-form-item>
      <div class="group">
        <div class="group-label">名称样式</div>
        <div class="group-content">
          <el-form-item label="字号">
            <el-input-number :min="10" v-model="attribute.xAxis.nameTextStyle.fontSize" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.xAxis.nameTextStyle.color" show-alpha/>
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">轴线</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.xAxis.axisLine.show" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.xAxis.axisLine.lineStyle.color" show-alpha/>
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">刻度</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.xAxis.axisTick.show" />
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">刻度值</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.xAxis.axisLabel.show" />
          </el-form-item>
          <el-form-item label="旋转">
            <el-input-number v-model="attribute.xAxis.axisLabel.rotate" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.xAxis.axisLabel.color" show-alpha/>
          </el-form-item>
          <el-form-item label="大小">
            <el-input-number v-model="attribute.xAxis.axisLabel.fontSize" />
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">分割线</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.xAxis.splitLine.show" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.xAxis.splitLine.lineStyle.color" show-alpha/>
          </el-form-item>
        </div>
      </div>
    </el-collapse-item>
    <el-collapse-item title="Y轴" v-if="hasy">
      <el-form-item label="显示">
        <el-switch v-model="attribute.yAxis.show" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="attribute.yAxis.name" clearable/>
      </el-form-item>
      <el-form-item label="名称位置">
        <tm-radio v-model="attribute.yAxis.nameLocation" :data="locationList"/>
      </el-form-item>
      <div class="group">
        <div class="group-label">名称样式</div>
        <div class="group-content">
          <el-form-item label="字号">
            <el-input-number :min="10" v-model="attribute.yAxis.nameTextStyle.fontSize" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.yAxis.nameTextStyle.color" show-alpha/>
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">轴线</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.yAxis.axisLine.show" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.yAxis.axisLine.lineStyle.color" show-alpha/>
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">刻度</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.yAxis.axisTick.show" />
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">刻度值</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.yAxis.axisLabel.show" />
          </el-form-item>
          <el-form-item label="旋转">
            <el-input-number v-model="attribute.yAxis.axisLabel.rotate" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.yAxis.axisLabel.color" show-alpha/>
          </el-form-item>
          <el-form-item label="大小">
            <el-input-number v-model="attribute.yAxis.axisLabel.fontSize" />
          </el-form-item>
        </div>
      </div>
      <div class="group">
        <div class="group-label">分割线</div>
        <div class="group-content">
          <el-form-item label="显示">
            <el-switch v-model="attribute.yAxis.splitLine.show" />
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.yAxis.splitLine.lineStyle.color[0]" show-alpha/>
            <el-color-picker v-model="attribute.yAxis.splitLine.lineStyle.color[1]" show-alpha/>
          </el-form-item>
          <el-form-item label="线条">
            <tm-select v-model="attribute.yAxis.splitLine.lineStyle.type" :data="lineType"></tm-select>
          </el-form-item>
          <el-form-item label="线宽">
            <el-input-number v-model="attribute.yAxis.splitLine.lineStyle.width"></el-input-number>
          </el-form-item>
        </div>
      </div>
    </el-collapse-item>
    <el-collapse-item title="数值" v-if="hasv">
      <div class="group">
        <div class="group-label">
          数值
        </div>
        <div class="group-content">
          <el-form-item label="是否显示">
            <el-switch v-model="attribute.series.label.show" />
          </el-form-item>
          <el-form-item label="文字颜色">
            <el-color-picker v-model="attribute.series.label.color" show-alpha/>
          </el-form-item>
          <el-form-item label="文字大小">
            <el-input-number v-model="attribute.series.label.fontSize" />
          </el-form-item>
          <el-form-item label="格式">
            <el-input v-model="attribute.series.label.formatter" />
          </el-form-item>
        </div>
      </div>
    </el-collapse-item>
  </div>
</template>

<script>
import tmRadio from '@/package/components/tm-radio'
import tmSelect from '@/package/components/tm-select'

export default {
  name: 'chart-xy-option',
  cnName: 'X/Y轴配置',
  components: {
    tmRadio,
    tmSelect
  },
  props: {
    attribute: Object,
    hasx: {
      type: Boolean,
      default: true
    },
    hasy: {
      type: Boolean,
      default: true
    },
    hasv: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      locationList: [
        {label: 'start', value: 'start'},
        {label: 'middle', value: 'middle'},
        {label: 'end', value: 'end'}
      ],
      lineType: [
        {label: 'solid', value: 'solid'},
        {label: 'dashed', value: 'dashed'},
        {label: 'dotted', value: 'dotted'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.chart-xy-option {
}
</style>
